<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>接口列表</title>
    <meta charset="utf-8">
    <@_includePlace path="/8ddab9ba-a8aa-4745-86c6-66bf1c2c976c.html"/> <#-- header -->
    <link href="${base}/resource/interface/code-formatter.css" rel="stylesheet"/>
<style>
#rawJson{width:100%; height: 50px;}
#interfaes{overflow: hidden;}
#interfaes a{padding: 0 5px;}
</style>
</head>
<body>
    <@_includePlace path="/c32a4f4a-ff5d-49cf-bb59-5d9784539174.html"/> <#-- 导航 -->
    <main class="container">
        <fieldset>
            <legend>接口测试</legend>
            <p>
                <label>地址：</label>
                <textarea cols="100" rows="2" id="sendData"></textarea>
                <label><input name="showParameters" type="checkbox" checked="checked"/>返回请求参数</label>
            </p>
            <p id="buttons" style="display:none"><input type="button" value="发送请求" onclick="invoke()"/></p>
            <p>
                <label>站点切换
                    <select onchange="$('#sendData').val($('#sendData').val().replace(sitePath,$(this).val()));sitePath=$(this).val();">
                <@_sysSiteList count=500>
                    <#list page.list as a>
                        <option value ="${a.dynamicPath!}" <#if site.id=a.id>selected="selected"</#if>>${a.name!}<#if site.id=a.id>[当前站点]</#if></option>
                    </#list>
                </@_sysSiteList>
                    </select>
                </label>
                <label><input type="radio" name="api" value="0"/>指令接口</label>
                <label><input type="radio" name="api" value="1"/>方法接口</label>
                <label><input type="radio" name="api" value="2"/>定制接口</label>
            </p>
            <p><em>红色字体接口需要使用AppToken才能访问，后台添加应用然后用appKey和appSecret通过定制接口appToken获取appToken，绿色框体接口需要登录信息authToken，authUserId才能访问,通过定制接口login获取</em></p>
            <p id="interfaes"></p>
            <p>
                <a href="javascript:;" onclick="$(this).hide().next().show();$('#interfaes').css('height','20px');return false;">↑↑↑↑ 折叠接口列表</a>
                <a href="javascript:;" style="display:none;" onclick="$(this).hide().prev().show();$('#interfaes').css('height','auto');return false;">↓↓↓↓ 展开接口列表</a>
            </p>
        </fieldset>
        <fieldset>
            <legend>返回报文</legend>
            <textarea id="rawJson"></textarea>
            <p><input type="button" value="格式化" onclick="process($('#rawJson').val(),$('.code-canvas'))"/></p>
            <div class="code-canvas"></div>
        </fieldset>
    </main>
    <@_includePlace path="/7f8bacb5-30ca-4641-b66f-987d447b1a85.html"/> <#-- footer -->
    <script src="${base}/resource/interface/code-formatter.js"></script>
    <script src="${base}/resource/interface/json2.js"></script>
<script>
var i=0;
var sitePath = '${base}/';
var apiArray=['api/directive/','api/method/','api/']
var apisArray=['api/directives','api/methods','api/apis'];
var supportShowParametersArray=[true,false,true];

function invoke(){
    $('#rawJson').val('loading...');
    $.ajax({
        url: $('#sendData').val(),
        type: 'GET',
        contentType:'application/json; charset=UTF-8',
        success: function (data) {
            $('#rawJson').val(JSON.stringify(data));
            process(JSON.stringify(data),$('.code-canvas'));
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest);
            console.log(errorThrown);
            $('#rawJson').val('http code:'+XMLHttpRequest.status+',error:'+textStatus);
        }
    });
}
function getSymbol(value){
    if(value.charAt(value.length-1)=='&'||value.charAt(value.length-1)=='?'){
        return '';
    }else{
        if(value&&value.indexOf('?')>0){
            return '&';
        }else{
            return '?';
        }
    }
}
function use(action,needAppToken,needUserToken,minParameters){
    $('#sendData').val(sitePath+apiArray[i]+action);
    if('true'==needAppToken){
        $('#sendData').val($('#sendData').val()+getSymbol($('#sendData').val())+'appToken={AppToken}');
    }
    if('true'==needUserToken){
        $('#sendData').val($('#sendData').val()+getSymbol($('#sendData').val())+'authToken={用户登录Token}&authUserId={用户ID}');
    }
    if(minParameters != 'undefined'){
        for (var j = 1; j <= minParameters; j++) {
            $('#sendData').val($('#sendData').val() + getSymbol($('#sendData').val()) + 'parameters=value' + j);
        }
    }else if($('input[name=showParameters]').is(':checked')&&$('input[name=showParameters]').is(':visible')){
        $('#sendData').val($('#sendData').val()+getSymbol($('#sendData').val())+'showParameters=true');
    }
    $('#buttons').show();
    return false;
}
function init(){
    i=$('input:radio[name=api]:checked').val();
    if(supportShowParametersArray[i]){
        $('input[name=showParameters]').parent().show();
    }else{
        $('input[name=showParameters]').parent().hide();
    }
    $('#interfaes').empty();
    $.ajax({
        url:sitePath+apisArray[i],type: 'GET',
        contentType:'application/json; charset=UTF-8',
        dataType: 'json',
        success: function (dataList) {
            $(dataList).each(function(index,data){
                var style='';
                if('true'==data.needAppToken){
                    style+='color:#f00;';
                }
                if('true'==data.needUserToken){
                    style+='border:1px solid #0f0;';
                }
                $('#interfaes').append(' <a href="javascript:;" style="'+style+'" onclick="return use(\''+data.name+'\',\''+data.needAppToken+'\',\''+data.needUserToken+'\',\''+data.minParameters+'\');">'+data.name+'</a> ');
            });
        }
    });
}
$(function(){
    $('input[name=showParameters]').click(function(){
        if($(this).is(':checked')){
            $('#sendData').val($('#sendData').val()+getSymbol($('#sendData').val())+'showParameters=true');
        }else{
            $('#sendData').val($('#sendData').val().replace('&showParameters=true','').replace('?showParameters=true',''));
        }
    });
    $('input:radio[name=api]').eq(0).click();
    $('input[name=api]').click(function(){
        init();
    });
    init();
});
</script>
</body>
</html>